<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> {{pageMethod=='edit'? '通知详情': '添加通知'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-form :model="notice" label-width="100px" class="demo-ruleForm">
        <el-form-item label="通知标题" prop="name">
          <el-input v-model="notice.noticeTitle"></el-input>
        </el-form-item>

        <el-form-item label="发布时间" prop="noticeDate">
          <el-date-picker type="datetime" placeholder="选择时间" v-model="notice.noticeDate"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item label="发布小区" prop="noticeDate">
          <el-select v-model="notice.noticeArea" placeholder="请选择小区">
            <el-option
              v-for="area in areas"
              :key="area.id"
              :label="area.name"
              :value="area.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知内容" prop="noticeBody">
          <el-input type="textarea" v-model="notice.noticeBody"></el-input>
        </el-form-item>
        <el-form-item v-if="pageMethod=='edit'">
          <el-button type="primary" @click="editNotice()">保存修改</el-button>
          <el-popconfirm title="确定删除此通知吗？" @confirm="deleteNotice()">
            <template #reference>
              <el-button type="danger">删除此通知</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
        <el-form-item v-else>
          <el-button type="success" @click="addNotice()">添加通知</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "notice-edit",
    inject: ['reload'],
    data() {
      return {
        pageMethod: 'edit',
        pageTitle: "通知详情",
        notice: {},
        areas: []
      }
    },
    computed: {
      defaultTime() {
        return new Date();
      }
    },
    methods: {
      getAreas() {
        this.$axios.get("/areas").then(res => {
          if (res.data.code == 200) {
            this.areas = res.data.obj;
          }
        })
      },
      editNotice() {
        this.notice.noticeDate = new Date(this.notice.noticeDate).format("yyyy-MM-dd hh:mm:ss")
        this.$axios.put("/notice", this.notice).then(res => {
          if (res.data.code == 200) {
            this.$message.success("保存成功")
            this.reload();
            this.$router.go(-1);
          }
        })
      },
      addNotice() {
        this.notice.noticeDate = new Date(this.notice.noticeDate).format("yyyy-MM-dd hh:mm:ss")
        this.$axios.post("/notice", this.notice).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功")
            this.reload();
            this.$router.go(-1);
          }
        })
      },
      getNotice() {
        this.$axios.get("/notice/" + this.$route.params.id).then(res => {
          if (res.data.code == 200) {
            this.notice = res.data.obj;
          }
        })
      },
      deleteNotice() {
        this.$axios.delete("/notice/" + this.$route.params.id).then(res => {
          if (res.data.code == 200) {
            this.$message.success("删除成功")
            this.reload();
            this.$router.go(-1);
          }
        })
      }
    },
    created() {
      this.getAreas();
      if (this.$route.params.id == '0') {
        this.pageMethod = "add";
      } else {
        this.notice.id = this.$route.params.id;
        this.getNotice();
      }
    }
  }
</script>

<style scoped>

</style>